<template>
  <div class="app-container">
    <div class="clearfix margin-b">
      <el-form>
        <el-input v-model='listQuery.searchName' clearable placeholder='按公众号名称或老师姓名进行搜索' style='width: 250px;'></el-input>
        <el-input v-model='listQuery.searchCourseName' clearable placeholder='请输入课程名称' style='width: 250px;'></el-input>
        <el-button type='success' icon='el-icon-search' @click="toSearch">搜索</el-button>
        <el-button type='primary' @click='linkToAddPublic'>导出excel</el-button>
      </el-form>
    </div>
    <el-table :data='txVideoListData' row-key='id' border fit highlight-current-row
              style='width: 100%;font-size:10px;font-weight:normal;' v-loading="this.listLoading">
      <el-table-column align='center' label='公司名称' width='120'>
        <template slot-scope='scope'>
          <span>{{scope.row.mpName}}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' label='课程名称'>
        <template slot-scope='scope'>
          <span>{{scope.row.lecturerName}}</span>
        </template>
      </el-table-column>
      <el-table-column width='80' align='center' label='课程价格'>
        <template slot-scope='scope'>
          <span>{{}}</span>
        </template>
      </el-table-column>
      <el-table-column width='150' align='center' label='讲师'>
        <template slot-scope='scope'>
          <span>{{scope.row.host}}</span>
        </template>
      </el-table-column>
      <el-table-column  align='center' label='明细名称'>
        <template slot-scope='scope'>
          <span>{{scope.row.allUser}}</span>
        </template>
      </el-table-column>
      <el-table-column width='70' align='center' label='课程排序'>
        <template slot-scope='scope'>
          <span>{{scope.row.allVip}}</span>
        </template>
      </el-table-column>
      <el-table-column width='70' align='center' label='视频排序'>
        <template slot-scope='scope'>
          <span>{{scope.row.allSvip}}</span>
        </template>
      </el-table-column>
      <el-table-column width='80' align='center' label='是否下载'>
        <template slot-scope='scope'>
          <span v-if="scope.row.isAuth  ==1" style="color:#409EFF;">✔</span>
          <span v-else style="color:red;">✘</span>
        </template>
      </el-table-column>
      <el-table-column width='80' align='center' label='是否上传'>
        <template slot-scope='scope'>
          <span v-if="scope.row.enableWxapp  ==1" style="color:#409EFF;">✔</span>
          <span v-else style="color:red;">✘</span>
        </template>
      </el-table-column>

      <el-table-column width='80' align='center' label='转码情况'>
        <template slot-scope='scope'>
          <span>{{scope.row.messagenBlance}}</span>
        </template>
      </el-table-column>
      <el-table-column width='80' align='center' label='操作'>
        <template slot-scope='scope'>
          <div>
            <b @click="linkToEdit(scope.row.companyId)">上传视频</b>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="block text-c">
      <!--分页组件 current-page:当前页   -->
      <!--   page-sizes:每页几条数据（选项）   -->
      <!--   page-size:每页几条数据   -->
      <!--   total:总条数   -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listQuery.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { toGetWeChatPublicList } from '@/api/wechatPublic'
  export default {
    data() {
      return {
        listQuery: {
          searchName: null,
          searchCourseName: null,
          total: null,
          limit: 10
        },
        listLoading: false,
        txVideoListData: []
      }
    },
    mounted() {

    },
    created() {
      this.getWechatPublicList()
    },
    methods: {
      getWechatPublicList() {
        this.listLoading = true
        toGetWeChatPublicList(this.listQuery).then(res => {
          // 正确回调
          console.log(res.data.data.data)
          this.publiceListData = res.data.data.data
          this.listQuery.total = res.data.data.total
          this.listLoading = false
        })
          .catch(err => {
            console.log(err)
          })
      },
      handleSizeChange(val) { // 切换每页几条数据方法
        this.listQuery.limit = val
        this.getWechatPublicList()
      },
      handleCurrentChange(val) { // 切换当前页
        this.listQuery.page = val
        this.getWechatPublicList()
      },
      linkToAddPublic() {
        this.$router.push({ name: 'addPublic' })
      },
      toSearch() {
        this.getWechatPublicList()
      },
      linkToEdit(id) {
        this.$router.push({ path: `editPublic/${id}` })
      },
      linkToCusterSystem() {

      },
      linkToXcx() {

      }
    }
  }
</script>
<style scoped>

</style>
